<template>
  <div>
    <div>TODOLIST</div>
    <head1 @enter="enter" />
    <cont :list="list" @del="del" />
    <foot1 :list="list" @clear="clear" />
  </div>
</template>

<script lang="ts" setup>
import head1 from "../components/header.vue";
import cont from "../components/content.vue";
import foot1 from "../components/footer.vue";
import { computed } from "vue";
import { useStore } from "vuex";
const store = useStore();
console.log(store.state.list);
//接收store中的值
const list = computed(() => {
  return store.state.list;
});

//头部输入的值
const enter = (val: any) => {
  console.log(val.value);
  let flag = true;

  list.value.map((item: any) => {
    if (item.title === val.value) {
      flag = false;
      val.value = "";
      alert("已在任务中!");
    }
  });
  if (flag && val.value !== "") {
    store.commit("add", val.value);
  }
};
// 删除
const del = (index: number) => {
  store.commit("del", index);
};
//清除已完成
const clear = (val: any) => {
  store.commit("clear", val);
};
</script>

<style></style>
